<template>
	<view>
		<u-navbar :border-bottom="false">
			<view class="slot-wrap">
				<u-search placeholder="请输入商品名字" @search="search" :show-action="false" focus v-model="key"></u-search>
			</view>
		</u-navbar>
		<view class="record">
			<view class="title">搜索历史 <u-icon v-if="record != ''" name="trash" @click="show = true"></u-icon>
			</view>
			<view class="list">
				<view class="" v-for="(item,index) in record" @click="$u.route('/pages/purchase/productList/productList',{key:item})" :key="index">{{item}}</view>
			</view>
			<u-empty v-if="record == ''" mode="history" margin-top="300"></u-empty>
		</view>
		<u-modal show-cancel-button confirm-color="#FF4D46" confirm-text="清除" v-model="show" @confirm="confirm" content="确认清除搜索历史吗？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				show: false,
				record: []
			};
		},
		onLoad() {

		},
		onShow() {
			if (uni.getStorageSync('searchRecord')) {
				this.record = uni.getStorageSync('searchRecord')
			}
		},
		methods: {
			confirm() {
				this.record = []
				uni.removeStorageSync('searchRecord')
			},
			search(e) {
				this.record.push(e)
				this.record = Array.from(new Set(this.record))
				uni.setStorageSync('searchRecord', this.record)
				this.$u.route('/pages/purchase/productList/productList', {
					key: e
				})
			}
		}
	}
</script>

<style lang="scss">
	.record {
		padding: 0 30rpx;
		padding-top: 50rpx;

		.list {
			>view {
				display: inline-block;
				background-color: rgba($color: #000000, $alpha: .1);
				padding: 5rpx 20rpx;
				border-radius: 20px;
				margin-top: 20rpx;
				margin-right: 30rpx;

				&:last-child {
					margin-left: 0;
				}
			}
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.slot-wrap {
		width: 100%;
		padding-right: 30rpx;
	}
</style>
